<!--告警事件-->
<template>
  <div class="wrapper" :style="{ '--theme': $store.getters.themeColor }">
    <div class="container">
      <event-process
        :getOrderInfo="getOrderInfo"
        :orderData.sync="orderData"
        :reldevice.sync="reldevice"
        :monitors.sync="monitors"
        :videoData.sync="videoData"
        :imgsList.sync="imgsList"
      />
      <el-row style="padding-right: 35px">
        <el-col :span="12" class="left">
          <el-collapse v-model="activeNames" @change="handleChange">
            <!--事件信息-->
            <el-collapse-item name="1">
              <template slot="title">
                <custom-title name="事件信息"></custom-title>
              </template>
              <alarm-info
                :orderData="orderData"
                :warningTypeList="warningTypeList"
                :monitors="monitors"
                :position="position"
                :positionMonitor="positionMonitor"
                :horiAzimuthAngle.sync="horiAzimuthAngle"
                hiddenTitle
                @mapCancel="isMapCancelFun"
              />
            </el-collapse-item>
            <!--情报来源信息（AI）-->
            <el-collapse-item name="2">
              <template slot="title">
                <custom-title name="告警来源"></custom-title>
              </template>
              <alarm-source
                :horiAzimuthAngle="horiAzimuthAngle"
                :reldeviceData="reldevice"
                :orderData="orderData"
                :positionMonitor="positionMonitor"
                hiddenTitle
              />
            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col :span="12" class="right">
          <medias-comp
            :imgs="imgsList"
            :order="orderData"
            :video="videoData"
            :position.sync="position"
            :horiAzimuthAngle="horiAzimuthAngle"
            :positionMonitor.sync="positionMonitor"
          />
        </el-col>
      </el-row>
    </div>
    <el-row>
      <hr class="custom-hr" />
      <!--按钮-->
      <el-row class="buttons">
        <!-- <el-tooltip
          effect="dark"
          placement="top"
          popper-class="repeated-event-tooltip"
        >
          <div slot="content" class="tooltip-content">
            工作台暂不支持指挥调度功能，如需使用，请前往监测预警大屏操作。
          </div>
          <el-button
            type="primary"
            v-if="$store.getters.userInfo.chooseTradeId === '100000'"
          >
            <span>指挥调度</span></el-button
          >
        </el-tooltip> -->
        <el-button
          type="primary"
          @click="videoClick"
          v-hasPermi="['event:judge:video']"
          v-if="['1', '3', '4', '11'].includes(orderData.warningSource)"
          ><span>实时视频</span>
        </el-button>
        <el-button
          type="primary"
          @click="trueWarnClick"
          v-hasPermi="['event:judge:shimko']"
          ><span>真 警</span>
        </el-button>
        <el-button
          type="primary"
          @click="falseWarnClick"
          v-hasPermi="['event:judge:false']"
          ><span>误 报</span>
        </el-button>
        <el-tooltip
          effect="dark"
          placement="top"
          popper-class="repeated-event-tooltip"
          :open-delay="1200"
        >
          <div slot="content" class="tooltip-content">
            不同告警来源的告警可能都是指向同一事件，同一告警来源的多次告警也可能指向同一事件，为了不对同一事件进行重复处理，您可以将告警事件置为重复告警，将其与之前已研判为真的事件进行关联。
          </div>
          <el-button
            type="primary"
            @click="repeatClick"
            v-hasPermi="['event:judge:rep']"
          >
            <span>重复告警</span></el-button
          >
        </el-tooltip>

        <el-button
          type="primary"
          @click="instructionsClick"
          v-hasPermi="['event:judge:inst']"
          v-if="orderData.leaderFlag == '1'"
        >
          转领导批示</el-button
        >
        <el-button
          type="primary"
          @click="endOrder"
          v-hasPermi="['event:judge:close']"
        >
          <span>关闭</span></el-button
        >
      </el-row>
    </el-row>
    <!-- <el-tabs v-show="isShowView === 2" :height="pageHeight" v-model="activeName" tab-position="left" value="1" class="tabsPane">
      <template v-for="(item,index) in relatedData" >
            <el-tab-pane :label="item" :name="index" :key="index">
              <span slot="label" :key="item" class="tabPane">
                <div style="width:25px;height:25px;padding:3.5px;border-radius:16px">{{index+1}}</div>
                <div v-if="index != relatedData.length-1" style="width:2px;height:30px;background:#e4e7ed;margin:5px auto 0" />
              </span>
              <alarmPanel :dataSource="relatedData[index]" :mainAlarmInfo="{emergencyLevelName:orderData.emergencyLevelName,address:orderData.address}" :alarmid="index" />
            </el-tab-pane>
          </template>
    </el-tabs> -->
    <!-- <el-col class="container" v-show="isShowView === 2">
        <el-collapse accordion :height="pageHeight">
          <el-collapse-item  v-for="item in relatedData" :key="item" :dataSource="orderData">
            <template slot="title">
              <span class="title-class" style="margin:0px 0px 0px 0px;"><div class="title"><span
                  class="icon"></span><span
                  class="title-name">{{orderData.alarmBody}}</span></div></span>
            </template>
            <alarmPanel :dataSource="orderData" :alarmid="item" />
          </el-collapse-item>
        </el-collapse>
    </el-col> -->
    <!---------------------------------dialog--------------------------->
    <!--  实时视频dialog-->
    <video-dialog
      @videoCancelFun="videoCancelFun"
      :isVideoList="isVideoList"
      :positionLeft="450"
      :positionTop="150"
    ></video-dialog>
    <!-- 真警dialog-->
    <true-warn-dialog
      @trueWarnCancelFun="trueWarnCancelFun"
      :orderData="orderData"
      :isTrueWarnList="isTrueWarnList"
    ></true-warn-dialog>
    <!-- 假警dialog-->
    <false-warn-dialog
      v-if="isFalseWarnList.isFalseWarn"
      @falseWarnCancelFun="falseWarnCancelFun"
      :isFalseWarnList="isFalseWarnList"
    ></false-warn-dialog>
    <!-- 重复dialog-->
    <repeat-dialog
      @repeatCancelFun="repeatCancelFun"
      :isRepeatList="isRepeatList"
      v-if="isRepeatList.isRepeat"
    ></repeat-dialog>
    <!--  转领导批示dialog-->
    <instructions-dialog
      @instructionsCancelFun="instructionsCancelFun"
      :isInstructionsList="isInstructionsList"
    ></instructions-dialog>
    <el-dialog
      :visible.sync="showBigImageVisible"
      width="60%"
      height="80%"
      :title="'图片'"
    >
      <el-image
        :src="bigImageUrl"
        class="imageClass"
        v-if="imgsList.length > 0"
      ></el-image>
      <el-image
        :src="demoImg"
        class="imageClass"
        v-if="imgsList.length == 0"
      ></el-image>
    </el-dialog>
    <!-----------------------------------结束-------------------------------->
  </div>
</template>

<script type="text/babel">
import demoImg from "@/assets/image/demoImg.png";
import EventProcess from "@/components/eventManagement/eventProcess.vue";
import { batchEndWarningOrder } from "@/api/modules/eventManagement/eventManagement";
import instructionsDialog from "./eventDialog/instructionDialog.vue";
import videoDialog from "./eventDialog/videoDialog.vue";
import falseWarnDialog from "./eventDialog/falseWarnDialog.vue";
import repeatDialog from "./eventDialog/repeatDialog.vue";
import CustomTitle from "@/components/eventManagement/Title.vue";
import { $getUrlParam } from "@/utils/public";
import TrueWarnDialog from "./eventDialog/trueWarnDialog";
import alarmPanel from "./alarmPanel";
import videoRepet from "@/components/eventManagement/videoRepet.vue";
import {
  getRegion,
  findOrderAlarm,
  getEnumInfo,
  getVideoPlaybackUrl,
  getOrderInfo,
} from "@/api/modules/eventManagement/eventJudge";
import MediasComp from "@/components/eventManagement/Medias.vue";
import AlarmInfo from "@/components/eventManagement/infos/AlarmInfo";
import AlarmSource from "@/components/eventManagement/infos/AlarmSource";
export default {
  name: "eventJudge",
  components: {
    AlarmInfo,
    AlarmSource,
    EventProcess,
    TrueWarnDialog,
    alarmPanel,
    instructionsDialog,
    videoDialog,
    falseWarnDialog,
    repeatDialog,
    videoRepet,
    CustomTitle,
    MediasComp,
  },
  data() {
    return {
      demoImg: demoImg,
      horiAzimuthAngle: "", // 水平方位角
      getOrderInfo,
      position: [0, 0], //经纬度
      positionMonitor: [0, 0], // 摄像机经纬度
      activeNames: ["1", "2"],
      importanceLevelList: [], //告警重要等级
      activeName: 0,
      relatedData: [], //测试用数组
      isShowView: 1, //展示的tab
      power: [], //按钮权限列表
      showBigImageVisible: false,
      bigImageUrl: "",
      videoData: {},
      reldevice: {},
      monitors: [],
      orderData: {
        msgNotifyType: "",
        leaderFlag: "",
        rollbackFlag: "",
        signFlag: "",
        alarmBody: "", //事件标题
        orderId: "", //事件编号
        warningOrderId: "", //告警单编码
        warningTypeName: "", //告警类型
        emergencyLevel: "",
        emergencyLevelName: "", //事件等级
        warningSource: "", //告警来源: 1-AI上报 2-人工上报
        warningSourceName: "",
        alarmTime: "", //告警时间
        orderStatusName: "", //事件状态
        keeperName: "", //所属网格员
        gridName: "", //所属网格
        // address: "",//事发地点
        description: "", //事件描述
        remark: "", //备注
        // name13: "",//研判结果
        // name14: "",//研判备注
        findName: "", //事件发现人姓名
        findMobile: "", //事件发现人电话
        findManType: "", //人员类型
        monitorCode: "", //告警摄像机编码
        deviceName: "", //告警摄像机名称
        channelName: "", //告警通道名称
        monitorAddr: "", //告警摄像机地址

        address: "",
        longitude: "", //经度
        latitude: "", //纬度
      },
      alarmLevelList: [],
      warningTypeList: [],
      warningTypeListOld: [],
      provinceList: [],
      cityList: [],
      countyList: [],
      isMapList: {
        longitude: "0", //经度
        latitude: "0", //纬度
        isMap: false,
      },
      imgsList: [], //图片
      videoUrl: "", //视频url
      isVideoList: {
        isVideo: false, //实时视频dialog显示标识
        monitorName: "", //告警摄像机名称
        deviceCode: "", //设备编码
        channelCode: "", //通道编码
        startTime: null, //开始时间
        endTime: null, //结束时间
      },
      isTrueWarnList: {
        isTrueWarn: false, //真警dialog显示标识
        orderId: "",
        warningOrderId: "",
        warningSource: "",
        warningTypeId: "",
        emergencyLevel: "",
        provinceId: "",
        cityId: "",
        countyId: "",
        address: "",
        longitude: "0", //经度
        latitude: "0", //纬度
        horiAzimuthAngle: "",
      },
      isFalseWarnList: {
        isFalseWarn: false, //假警dialog显示标识
        orderId: "",
        warningOrderId: "",
        desc: "",
        warningSource: "",
      },
      isRepeatList: {
        isRepeat: false, //重复dialog显示标识
        orderId: "",
        warningOrderId: "",
        longitude: "",
        latitude: "",
        warningSource: "",
      },
      isInstructionsList: {
        isInstructions: false, //转领导批示dialog显示标识
        orderId: "",
        provinceId: "",
        cityId: "",
        countyId: "",
        msgNotifyType: "",
      },
      keepList: ["eventJudge"],
      warningOrderId: "",
    };
  },
  mounted() {
    this.loadInit();
    //重复告警-返回处理
    this.$nextTick(() => {
      setTimeout(() => {
        let url = location + "";
        if (url.indexOf("&") != -1 && url.indexOf("?") != -1) {
          let urls = url.substr(0).split("&")[2];
          urls = urls.split("=")[1];
          if (urls == "0") {
            this.repeatClick();
          }
        }
      }, 1000);
    });
  },
  created() {
    // getInfo().then((res) => {
    //   this.power = res.permissions;
    // });
    // let loginInfo = $store.get('$loginInfo');
    // if (loginInfo.power['/event']) {
    //   this.power = loginInfo.power['/event'];
    // }
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    endOrder() {
      let params = {
        warningOrderList: [
          {
            currentLink: this.orderData.orderStatus,
            warningOrderId: this.orderData.warningOrderId,
          },
        ],
        tenantId: this.$store.getters.userInfo.tenantId,
      };

      this.$confirm("是否要将当前的告警事件进行关闭？", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false,
      }).then(() =>
        batchEndWarningOrder(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("关闭成功");
            const url =
              $getUrlParam("pageType") === "false"
                ? "/eventManagement"
                : "/eventManagement/myEvent";
            this.$close(url);
            // this.loadInit();
          } else {
            this.$message.warning(res.msg);
          }
        })
      );
    },
    changeFun(val) {
      this.isShowView = val;
      switch (val) {
        case 1: //基本信息
          break;
        case 2: //次要告警
          break;
      }
    },
    /**
     * 加载初始化方法
     */
    loadInit() {
      this.findOriginalTypeList();
      //查询告警级别下拉框
      this.doEnumInfoQry(41, (resp) => {
        this.alarmLevelList = resp.data;
      });
      this.doEnumInfoQry(90, (resp) => {
        this.importanceLevelList = resp.data;
      });
    },
    imageClickFun(url) {
      this.bigImageUrl = url;
      this.showBigImageVisible = true;
    },
    //经纬度和地址回显
    isMapCancelFun(data) {
      let _this = this;
      if (data) {
        _this.orderData.longitude = parseFloat(data.longitude).toFixed(9);
        _this.orderData.latitude = parseFloat(data.latitude).toFixed(9);
        _this.isTrueWarnList.longitude = parseFloat(data.longitude).toFixed(9);
        _this.isTrueWarnList.latitude = parseFloat(data.longitude).toFixed(9);
        _this.isTrueWarnList.horiAzimuthAngle = this.horiAzimuthAngle;

        //如果市为空，让区赋值给你市（直辖市特殊操作）
        if (data.city == "") {
          data.city = data.district;
        }
        //省
        _this.onLoadData_province(() => {
          for (let i = 0; i < _this.provinceList.length; i++) {
            if (_this.provinceList[i].label === data.province) {
              _this.isTrueWarnList.provinceId = _this.provinceList[i].code;
              _this.isFalseWarnList.provinceId = _this.provinceList[i].code;
              _this.isRepeatList.provinceId = _this.provinceList[i].code;
              _this.orderData.provinceId = _this.provinceList[i].code;
              break;
            }
          }
          _this.onLoadData_city(_this.orderData.provinceId, () => {
            for (let i = 0; i < _this.cityList.length; i++) {
              if (_this.cityList[i].label === data.city) {
                _this.isTrueWarnList.cityId = _this.cityList[i].code;
                _this.isFalseWarnList.cityId = _this.cityList[i].code;
                _this.isRepeatList.cityId = _this.cityList[i].code;
                _this.orderData.cityId = _this.cityList[i].code;
                break;
              }
            }
            _this.onLoadData_county(_this.orderData.cityId, () => {
              for (let i = 0; i < _this.countyList.length; i++) {
                if (_this.countyList[i].label === data.district) {
                  _this.isTrueWarnList.countyId = _this.countyList[i].code;
                  _this.isFalseWarnList.countyId = _this.countyList[i].code;
                  _this.isRepeatList.countyId = _this.countyList[i].code;
                  _this.orderData.countyId = _this.countyList[i].code;
                  break;
                }
              }
            });
          });
        });
        _this.orderData.provinceName = data.province;
        _this.orderData.cityName = data.city;
        _this.orderData.countyName = data.district;
        _this.orderData.address =
          data.province + data.city + data.district + data.address;

        _this.isTrueWarnList.address =
          data.province + data.city + data.district + data.address;
        _this.isFalseWarnList.address =
          data.province + data.city + data.district + data.address;
        _this.isRepeatList.address =
          data.province + data.city + data.district + data.address;
      }
    },
    onLoadData_province(fun) {
      let _this = this;
      getRegion({ areaLevel: 1 }).then((result) => {
        if (result.code === 200) {
          _this.provinceList = [];
          for (let i = 0; i < result.data.length; i++) {
            let row = result.data[i];
            if (row.areaLevel === "1") {
              _this.provinceList.push({
                label: row.areaName,
                code: row.areaCode,
              });
            }
          }
          if (fun) {
            fun();
          }
        }
      });
    },
    onLoadData_city(id, fun) {
      let _this = this;
      getRegion({ areaLevel: 2, areaParentCode: id }).then((result) => {
        if (result.code === 200) {
          _this.cityList = [];
          for (let i = 0; i < result.data.length; i++) {
            let row = result.data[i];
            _this.cityList.push({
              label: row.areaName,
              code: row.areaCode,
            });
          }
          if (fun) {
            fun();
          }
        }
      });
    },
    onLoadData_county(id, fun) {
      let _this = this;
      getRegion({ areaLevel: 3, areaParentCode: id }).then((result) => {
        if (result.code === 200) {
          _this.countyList = [];
          for (let i = 0; i < result.data.length; i++) {
            let row = result.data[i];
            _this.countyList.push({
              label: row.areaName,
              code: row.areaCode,
            });
          }
          if (fun) {
            fun();
          }
        }
      });
    },
    /**
     * 查询告警类型集合
     */

    findOriginalTypeList() {
      const _this = this;
      findOrderAlarm({}).then((resp) => {
        if (resp && resp["code"] === 200 && resp.data.length > 0) {
          _this.warningTypeListOld = resp.data;
          _this.warningTypeList = resp.data;
          _this.addTypeList();
        }
      });
    },

    /**
     * 无匹配告警类型时的处理(解决客户拥有某告警类型时推送的告警事件一直没研判，订购告警类型到期后，研判页面告警类型显示value问题)
     */
    addTypeList() {
      const _this = this;
      var num = 0;
      if (
        _this.warningTypeList.length < 0 ||
        _this.orderData.warningTypeId == ""
      ) {
        return;
      } else {
        for (let i in _this.warningTypeList) {
          let value = "";
          value = _this.warningTypeList[i].typeValue.toString();
          if (value == _this.orderData.warningTypeId) {
            num = 0;
            return;
          } else {
            num++;
          }
        }
      }
      if (num > 0) {
        var typeArr = [];
        typeArr.typeValue = _this.orderData.warningTypeId;
        typeArr.typeName = _this.orderData.warningTypeName;
        _this.warningTypeList[_this.warningTypeList.length] = typeArr;
      }
    },

    /**
     * 查询枚举值
     */
    doEnumInfoQry(enumTypeId, success) {
      const _this = this;
      /* 获取枚举值 */
      getEnumInfo({ enumTypeId: enumTypeId }).then((resp) => {
        if (resp && resp["code"] === 200 && resp.data.length > 0) {
          if (success) {
            success(resp);
          }
        }
      });
    },
    warningType(val) {
      switch (val) {
        case "1":
          return "AI自动上报";
        case "2":
          return "人工上报";
        case "3":
          return "一键告警";
        case "7":
          return "行业告警";
      }
    },
    videoDataFun(data, orderData) {
      let _this = this;
      // let info = $store.get('$loginInfo');
      let info = _this.$store.getters.userInfo;
      let params = {
        deviceCode: orderData.deviceCode, //设备编码
        channelCode: orderData.channelCode, //通道编码
        protocolType: "3", //协议类型
        storageType: "1", //存储类型
        startTime: data.startTime, //开始时间
        endTime: data.endTime, //结束时间
        customerCode: info.tenantId, //客户编码（租户id）
      };
      getVideoPlaybackUrl(param).then((resp) => {
        if (resp && resp.code == "200") {
          _this.videoUrl = resp.data.streamUrl;
          _this.playerOptions.sources[0].src = _this.videoUrl;
        } else {
          _this.$message.warning(resp.msg);
        }
      });
    },
    //返回按钮
    returnFun() {
      let _this = this;
      // this.$router.go(-1);
      if ($getUrlParam("pageType") === "false") {
        this.$router.push({ path: "/eventManagement" });
      } else {
        this.$router.push({ path: "/eventManagement/myEvent" });
      }
    },
    //------------------------------------------------------------------------------------------
    // 点击转领导批示按钮
    instructionsClick() {
      this.isInstructionsList.orderId = this.orderData.warningOrderId;
      this.isInstructionsList.provinceId = this.orderData.provinceId;
      this.isInstructionsList.cityId = this.orderData.cityId;
      this.isInstructionsList.countyId = this.orderData.countyId;
      this.isInstructionsList.msgNotifyType = this.orderData.msgNotifyType;
      this.isInstructionsList.isInstructions = true;
    },
    instructionsCancelFun(data) {
      this.isInstructionsList.isInstructions = data;
    },
    // 实时视频
    videoClick() {
      let _this = this;
      //AI上报
      if (_this.orderData.warningSource == "1") {
        _this.isVideoList.monitorName = _this.orderData.deviceName;
        _this.isVideoList.deviceCode = _this.orderData.deviceCode;
        _this.isVideoList.channelCode = _this.orderData.channelCode;
        _this.isVideoList.isVideo = true;
      } else {
        this.$message.warning("无实时视频！");
      }
    },
    videoCancelFun(data) {
      this.isVideoList.isVideo = data;
    },
    // 真警
    trueWarnClick() {
      this.isTrueWarnList.orderId = this.orderData.orderId;
      this.isTrueWarnList.warningOrderId = this.orderData.warningOrderId;
      this.isTrueWarnList.warningSource = this.orderData.warningSource;
      this.isTrueWarnList.importanceLevel = this.orderData.importanceLevel;
      this.isTrueWarnList.emergencyLevel = this.orderData.emergencyLevel;
      this.isTrueWarnList.warningTypeId = this.orderData.warningTypeId;
      this.isTrueWarnList.longitude = this.orderData.longitude;
      this.isTrueWarnList.latitude = this.orderData.latitude;
      this.isTrueWarnList.isTrueWarn = true;
    },
    trueWarnCancelFun(data) {
      this.isTrueWarnList.isTrueWarn = data;
    },
    // 假警
    falseWarnClick() {
      this.isFalseWarnList.orderId = this.orderData.orderId;
      this.isFalseWarnList.warningOrderId = this.orderData.warningOrderId;
      this.isFalseWarnList.importanceLevel = this.orderData.importanceLevel;
      this.isFalseWarnList.warningSource = this.orderData.warningSource;

      this.isFalseWarnList.longitude = this.orderData.longitude;
      this.isFalseWarnList.latitude = this.orderData.latitude;
      this.isFalseWarnList.isFalseWarn = true;
      this.isFalseWarnList.linkId = this.orderData.linkId;
      this.isFalseWarnList.flowId = this.orderData.flowId;
      this.isFalseWarnList.deviceCode = this.orderData.deviceCode;
      this.isFalseWarnList.warningTypeId = this.orderData.warningTypeId;
    },
    falseWarnCancelFun(data) {
      this.isFalseWarnList.isFalseWarn = data;
    },
    // 重复
    repeatClick() {
      let _this = this;
      _this.isRepeatList.orderId = _this.orderData.orderId;
      _this.isRepeatList.warningOrderId = _this.orderData.warningOrderId;
      _this.isRepeatList.longitude = _this.orderData.longitude;
      _this.isRepeatList.latitude = _this.orderData.latitude;
      _this.isRepeatList.deviceCode = _this.orderData.deviceCode;
      _this.isRepeatList.warningTypeId = _this.orderData.warningTypeId;
      _this.isRepeatList.warningSource = _this.orderData.warningSource;

      _this.isRepeatList.isRepeat = true;
    },
    repeatCancelFun(data) {
      this.isRepeatList.isRepeat = data;
    },
  },
};
</script>
<style lang="scss" scoped>
$theme: var(--theme);
.question {
  width: 14px;
  height: 32px;
  margin-left: 1px;
  display: flex;
  flex-wrap: nowrap;
}
.question .text {
  width: 14px;
  height: 14px;
  background: #fac800;
  border-radius: 7px;
  line-height: 14px;
  color: #ffffff;
  font-size: 12px;
  margin: auto;
  text-align: center;
}
.header-title {
  flex: 1;
  text-align: center;
}

.tabsPane {
  padding: 20px 0;
  height: 550px;
}
.tabsPane >>> .el-tabs__item {
  height: 65px !important;
}
.tabsPane >>> .is-left .el-tabs__nav-prev {
  border: 0;
}
.tabsPane >>> .is-left .el-tabs__nav-next {
  border: 0;
}
.tabsPane >>> .el-tabs__active-bar {
  display: none;
}
.tabsPane >>> .el-tabs__nav-wrap.is-left:after {
  width: 0px !important;
}
.tabsPane >>> .el-tabs__item {
  height: 70px;
  color: #606266;
}
.tabsPane >>> .el-tabs__item.is-active {
  color: #fff !important;
}
.tabPane {
  text-align: center !important;
  line-height: 20px !important;
}
.tabsPane >>> .el-tabs__item div {
  background: #e4e7ed;
}
.tabsPane >>> .el-tabs__item.is-active div {
  background: $theme;
}
.wrapper {
  height: 100%;
  overflow: hidden;
}
.container {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 10px;
  height: calc(100% - 83px);
  overflow-y: scroll;
}

/*-----------------------------------left样式------------------------------*/
.left {
  width: 52%;
  padding-right: 20px;
  /deep/ .el-collapse {
    border: none;

    .el-collapse-item__wrap {
      border: none;
    }

    .el-collapse-item__header {
      border: none;
    }
  }
}
// .title-class {
//   display: inline-block;
// }

.icon {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 1vh;
  margin-right: 1vh;
}

// .title-name {
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #ffffff;
//   line-height: 22px;
//   margin-right: 2vh;
//   font-size: 14px;
// }

// /deep/ .el-form-item .el-form-item__label {
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #999999;
//   line-height: 20px;
//   /*font-size: 14px;*/
// }

/deep/ .el-input.is-disabled .el-input__inner {
  cursor: not-allowed;
  border: none;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 0.85);
  /*font-size: 14px;*/
}

/deep/ .el-form-item.small {
  line-height: 24px;
}

/*/deep/ .el-input__inner {*/
/*  padding: 0;*/
/*}*/

.line {
  height: 1px;
  border: 1px solid #b4bdc5;
  margin-top: 3vh;
  margin-bottom: 3vh;
  margin-right: 3vh;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  margin: 20px 60px 30px 0px;
}
.topButtons {
  display: flex;
  margin-bottom: 3vh;
  height: 30px;
}
/deep/ .buttonClass1 .el-button:focus,
/deep/ .buttonClass1 .el-button:hover {
  background: #f5f5f5 !important;
  border-color: #cddbe6 !important;
  color: #999 !important;
  box-shadow: 0 0 0 0 transparent !important;
}

.buttonClass1 {
  margin-left: 0px;
  height: 32px;
  min-width: 30px;
  /*height: 4.5vh;*/
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid $theme;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonClass span {
  width: 56px;
  height: 3vh;
  /*font-size: 14px;*/
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: $theme;
  line-height: 20px;
}

/*-----------------------------------right样式------------------------------*/
.right {
  margin-bottom: 10px;
  margin-top: 20px;
  width: 48%;
}

/*.right .el-row {*/
/*  margin-bottom: 3vh;*/
/*}*/

// /deep/ .el-carousel__container {
//   height: 175px;
// }

.infospace {
  margin-bottom: 1.5%;
  margin-top: 1.5%;
  transform: scale(0.8) !important;
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
}

.titleClass {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}

.titleClass {
  display: flex !important;
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  padding: 0.3vh 0px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  font-size: 17px;
}

.valueClass {
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  // padding: 0.3vh 0px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  // display: contents;
  font-size: 17px;
  font-weight: 400;
}

.returnClass {
  float: right;
  margin-right: 10px;
  background: $theme;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-top: 3vh;
}

.returnClass1 {
  /*float: right;*/
  /*margin-right: 10px;*/
  background: $theme;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  /*margin-top: 3vh;*/
}

/deep/ .returnClass1 span {
  color: #ffffff !important;
}

/deep/ .returnClass span {
  color: #ffffff !important;
}

.selectClass {
  width: 50%;
}

/deep/ .imageClass {
  width: 100%;
  height: 75vh;
  max-width: 100%;
  max-height: 100%;
}

.returnClass:hover {
  color: #ffffff;
  background-color: $theme;
  -webkit-box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
  box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
}

.buttonClass:hover {
  color: $theme;
  background-color: #ffffff;
  -webkit-box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
  box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
}

/**提示样式**/
.tooltip-content {
  width: 435px;
  //padding:5px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 25px;
}
.custom-hr {
  margin: 0px 0 15px;
  background-color: #f0f0f0;
  border: none;
  height: 1px;
}
</style>
